<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="keywords" content="{$seo_keywords}">
<meta name="description" content="{$seo_description}">
<title>{$seo_title}</title>
<link rel="icon" href="{$system.ico}">
<link rel="stylesheet" href="/themes/bktymbwz/static/css/element.min.css">
<link rel="stylesheet" href="/themes/bktymbwz/static/css/onekey.min.css">
<script type="text/javascript" src="/themes/bktymbwz/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/themes/bktymbwz/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/bktymbwz/static/js/element.min.js"></script>
<script type="text/javascript" src="/themes/bktymbwz/static/js/common.js"></script>
</head>
<body>
<div id="header" v-cloak>
    <div class="el-warp">
        <div class="left">
            <div class="item">
                <a class="logo" style="background-image:url({$system.c_logo})" href="{:index_url('comprehensive-discussion')}"></a>
            </div>
        </div>
        <div class="right">
            <div class="item">
                <el-input 
                    size="small" 
                    v-model="keyword" 
                    suffix-icon="el-icon-search" 
                    placeholder="请输入帖子标题、正文关键词" 
                    @change="location.href=index_url('search', {keyword: keyword})"
                    @keyup.enter.native="location.href=index_url('search', {keyword: keyword})">
                </el-input>
            </div>
            <div class="item">
                <a href="{:index_url('blog/user/blogSave')}"><el-button size="small">发帖</el-button></a>
            </div>
            <div class="item">
                <el-badge :value="notice" :hidden="notice == 0" class="item">
                    <a href="{:index_url('blog/user/blogNotice')}" class="el-icon-message-solid"></a>
                </el-badge>
            </div>
            <div class="item">
                <a v-if="JSON.stringify(userInfo) == '{}'" class="login" href="{:index_url('login/index')}">登录</a>
                <el-popover
                    v-else
                    trigger="hover"
                    placement="bottom">
                    <div class="el-user-open">
                        <a href="{:index_url('comprehensive-discussion')}" class="item"><i class="el-icon-house"></i>首页</a>
                        <a href="{:index_url('blog/user/blogSave')}" class="item"><i class="el-icon-edit"></i>发帖</a>
                        <a href="{:index_url('user/index')}" class="item"><i class="el-icon-user"></i>我的主页</a>
                        <a href="javascript:;" @click="logout()" class="item"><i class="el-icon-circle-close"></i>退出登录</a>
                    </div>
                    <img slot="reference" class="cover" :src="userInfo.cover">
                </el-popover>
            </div>
        </div>
    </div>
</div>
<script>
new Vue({
    el: '#header',
    data() {
        return {
            notice: 0,
            keyword: locationUrl.get('keyword'),
        }
    },
    created() {
        let self = this;
        post('api/blog/blog/noticeCount', {user_id: userInfo.id}, function (res) {
            if (res.status == 'success') {
                self.notice = res.data;
            }
        })
    },
    methods: {
        logout() {
            localStorage.token    = null;
            localStorage.userInfo = null;
            location.href = index_url('login/index');
        },
    }
})
</script>